<template>
  <div style="padding: 20px;">
    <div class="item">
      <div class="name">脚本名称 <span class="red">*</span>:</div>
      <el-input style="width: 780px;" placeholder="请输入作业名称" v-model="taskName"></el-input>
    </div>
    <div class="item">
      <div class="name">执行账户 <span class="red">*</span>:</div>
      <el-select v-model="rootName" filterable clearable style="width: 740px;">
        <el-option v-for="item in rootNames" :key="item.id" :label="item.account" :value="item.account"></el-option>
      </el-select>
      <div class="add" @click="addRole">
        <i class="el-icon-plus"></i>
      </div>
    </div>
    <div class="add-role" v-show="showAddRole">
      <div class="item" style="margin-left: 20px;">
        <div class="name">账户名称 <span class="red">*</span>:</div>
        <el-input style="width: 300px;" placeholder="此账户必须在目标服务器上存在" v-model="inputRole"></el-input>
        <el-button type="primary" style="margin-left: 20px;" @click="newRole">登记账户</el-button>
        <!-- <div class="help-info">
          <i class="el-icon-question"></i>
        </div> -->
      </div>
      <p class="add-error" v-if="addError">帐号名称不合法，应该以英文字母和阿拉伯数字下划线为命名长度不超过32个字符!</p>
    </div>
    <div class="item">
      <div class="name">目标机器 <span class="red">*</span>:</div>
      <el-button type="primary" icon="el-icon-upload" @click="chooseServer">选择服务器</el-button>
    </div>
    <tool-choose-service :machines="machines" @close="close" v-on:choosed="serverList"></tool-choose-service>
    <div class="add-role" style="background: #ffffff;border: 1px solid #DDDDDD;padding: 10px;" v-show="showChoosed">
      <el-table
        :data="choosedServer"
        style="width: 100%;text-align: center;"
        empty-text="请添加源文件!">
        <el-table-column
          header-align="center"
          prop="host_name"
          label="平台名称"
          width="200">
        </el-table-column>
        <el-table-column
          header-align="center"
          prop="ip"
          label="IP/分组"
          width="200">
        </el-table-column>
        <el-table-column
          header-align="center"
          prop="state"
          label="状态"
          width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.status === 1" style="color: green;">Running</span>
              <span v-else style="color: red;">Stop</span>
            </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="deleteChoosed(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="item">
      <div class="name">脚本来源 <span class="red">*</span>:</div>
        <el-radio-group v-model="scriptSource" style="margin-top: 10px;">
          <el-radio label="0">手工录入</el-radio>
          <el-radio label="1">本地脚本</el-radio>
        </el-radio-group>
    </div>
    <div class="item">
      <div class="name">脚本内容 <span class="red">*</span>:</div>
      <el-tabs value="shell" style="width: 780px">
        <el-tab-pane label="shell" name="shell">
          <textarea name="shell" id="editor" style="width: 100%;height: 300px;" v-model="shellTxt"></textarea>
        </el-tab-pane>
        <el-tab-pane label="bat" name="bat">
          <textarea name="shell" id="editor" style="width: 100%;height: 300px;"></textarea>
        </el-tab-pane>
        <el-tab-pane label="perl" name="perl">
          <textarea name="shell" id="editor" style="width: 100%;height: 300px;"></textarea>
        </el-tab-pane>
        <el-tab-pane label="python" name="python">
          <textarea name="shell" id="editor" style="width: 100%;height: 300px;"></textarea>
        </el-tab-pane>
        <el-tab-pane label="powershell" name="powershell">
          <textarea name="shell" id="editor" style="width: 100%;height: 300px;"></textarea>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="item">
      <div class="name">脚本参数&nbsp;&nbsp;:</div>
      <el-input style="width: 780px;" placeholder="请输入脚本参数" v-model="scriptParam"></el-input>
      <!-- <el-checkbox v-model="senseParam" style="margin-left: 15px;"><span class="red">*敏感参数</span></el-checkbox> -->
    </div>
    <div class="item" style="margin-left: 108px">
      <div class="name">超时时间(s) :</div>
      <el-input style="width: 780px;" placeholder="超时时间" v-model="timeout"></el-input>
    </div>
    <div class="repline"></div>
    <el-button type="success" style="margin-left: 220px;" @click="executeScript">执行脚本</el-button>
    <el-dialog
      title="提示"
      :visible.sync="warningInfo"
      width="30%">
      <div><span class="red">*</span> 为必填项,请完善信息!</div>
    </el-dialog>
  </div>
</template>
<script>
  import services from '../../components/ChooseServer/index'
  import { serverList, AccountList, AddAccount, ExecTask } from '../../api/configure'

  export default {
    name: 'fast-script',
    components: {
      'tool-choose-service': services
    },
    data() {
      return {
        taskName: '',
        rootName: '',
        rootNames: [],
        inputRole: '',
        showAddRole: false,
        addError: false,
        machines: [],
        scriptSource: '0',
        shellTxt: '',
        scriptParam: '',
        // senseParam: false,
        showText: '',
        choosedServer: [],
        showChoosed: false,
        timeout: 0,
        scriptData: null,
        warningInfo: false
      }
    },
    watch: {
      scriptSource: function(val) {
        console.log(val)
      },
      choosedServer: function(val) {
        if (val.length !== 0) {
          this.showChoosed = true
        }
      }
    },
    created() {
      AccountList().then(res => {
        if (res.code === 200) {
          this.rootNames = res.data
          this.rootName = this.rootNames[0].account
        }
      }).catch(err => {
        console.log(err)
        this.rootNames = []
        this.$notify({
          title: '失败',
          message: '获取失败',
          type: 'warning',
          duration: 2000
        })
      })
    },
    methods: {
      addRole() {
        this.showAddRole = !this.showAddRole
      },
      newRole() {
        var str = this.inputRole
        if (str === '') {
          this.addError = true
          return
        }
        if (str.length > 32) {
          this.addError = true
          return
        }
        for (var i = 0; i < str.length; i++) {
          if (str.charAt(i) < '0' || (str.charAt(i) < 'A' && str.charAt(i) > '9') || (str.charAt(i) > 'Z' && str.charAt(i) < 'a' && str.charAt(i) !== '_') || str.charAt(i) > 'z') {
            this.addError = true
            return
          }
        }
        var obj = {}
        obj.account = str
        AddAccount(obj).then(res => {
          if (res.code === 200) {
            AccountList().then(res => {
              if (res.code === 200) {
                this.rootNames = res.data
              }
            }).catch(err => {
              console.log(err)
              this.rootNames = []
              this.$notify({
                title: '失败',
                message: '获取失败',
                type: 'warning',
                duration: 2000
              })
            })
            this.rootName = str
          }
        }).catch(err => {
          console.log(err)
          this.$notify({
            title: '失败',
            message: '获取失败',
            type: 'warning',
            duration: 2000
          })
        })
      },
      executeScript() {
        if (this.taskName === '' || this.choosedServer === [] || this.shellTxt === '') {
          this.warningInfo = true
          return
        }
        var obj = {}
        var str = this.choosedServer[0].ip
        for (var i = 1; i < this.choosedServer.length; i++) {
          str += '\n' + this.choosedServer[i].ip
        }
        obj.ScriptName = this.taskName
        obj.ReleaseUser = this.rootName
        obj.Hosts = str
        obj.ScriptContent = this.shellTxt
        // if (this.scriptSource === '0') {
        //   obj.Type = 0
        // } else {
        //   obj.Type = 1
        // }
        obj.type = parseInt(this.scriptSource)
        if (this.timeout) {
          obj.Timeout = parseInt(this.timeout)
        }
        if (this.scriptParam !== '') {
          obj.ScriptParms = this.scriptParam
        }
        this.scriptData = obj
        ExecTask(this.scriptData).then(res => {
          if (res.code === 200) {
            this.$router.push({ path: '/task/task-run', query: { id: res.data }})
          }
        })
      },
      chooseServer() {
        serverList().then(res => {
          if (res.code === 200) {
            this.machines = res.data
          }
        }).catch(err => {
          console.log(err)
          this.machines = []
          this.$notify({
            title: '失败',
            message: '获取失败',
            type: 'warning',
            duration: 2000
          })
        })
      },
      deleteChoosed(index, row) {
        for (var i = 0; i < this.choosedServer.length; i++) {
          if (this.choosedServer[i].id === row.id) {
            this.choosedServer.splice(i, 1)
            if (this.choosedServer.length === 0) {
              console.log('false')
              this.showChoosed = false
            }
          }
        }
      },
      close() {
        this.machines = []
      },
      serverList(multipleSelection) {
        this.choosedServer = multipleSelection
      }
    }
  }
</script>

<style lang="scss" scoped>
  .repline{
    margin: 20px 0;
    margin-left: 220px;
    width: 780px;
    background: rgba(00, 00, 00, .2);
    height: 1px;
  }
  .red {
    color: red;
  }
  .name {
    font-size: 16px;
    line-height: 36px;
    margin-right: 20px;
  }
  .item {
    position: relative;
    margin-top: 10px;
    margin-left: 120px;
    display: box;
    display: -webkit-box;
    .add {
      width: 36px;
      height: 36px;
      margin-left: 2px;
      border: 1px solid rgba(00,00,00,.3);
      .el-icon-plus {
        margin-left: 50%;
        margin-top: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        color: rgba(00,00,00,.3);
      }
    }
    // .help-info {
    //   margin-left: 15px;
    //   margin-top: 10px;
    //   color: rgba(00,00,00,.6)
    // }
  }
  .add-role {
    width: 640px;
    height: auto;
    margin-left: 220px;
    margin-top: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    background: rgba(00, 00, 00, .3);
  }
  .add-error {
    width: 300px;
    color: red;
    margin-left: 120px;
    margin-top: 10px;
    line-height: 18px;
    font-size: 14px;
  }
</style>
